图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式 您所在的位置:网站首页 input value属性的作用 图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式

图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式

#图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式| 来源: 网络整理| 查看: 265

在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明。这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder属性的样式,感兴趣的朋友可以参考一下,希望对你有所帮助!

placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示,一旦用户输入信息该提示就会自动消失。比如:我们在登录时需要输入用户名和密码,它会提示你什么地方输入用户名,什么地方输入密码,这个就是使用的placeholder属性。

打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

一、placeholder属性怎么用

语法: placeholder="你想要提示的内容"

可以直接在需要提示的input输入框中加上placeholder属性,比如:

效果图:

如图所示,input输入框里面提示用户输入用户名

二、placeholder属性修改 当placeholder属性默认的颜色,样式等不能满足我们的需要时,需要修改它的样式。 写法:input::-webkit-input-placeholder{你想要修改的样式} 因为placeholder是 HTML5 中新增加的属性,需要注意浏览器的兼容性。 ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ :-moz-placeholder{} /* Firefox版本4-18 */ ::-moz-placeholder{} /* Firefox版本19+ */ :-ms-input-placeholder{} /* IE浏览器 */

举例:修改placeholder样式,将input提示框中文字的颜色设为红色,字体设为20px,让文字在输入框中水平居中显示。代码如下

HTML部分: CSS部分: input{width: 200px;height: 40px;} #input::-webkit-input-placeholder { color: red; font-size: 20px; text-align: center; } #input:-moz-placeholder { color: red; font-size: 20px; text-align: center; } #input:-ms-input-placeholder { color: red; font-size: 20px; text-align: center; }

效果图:

总结:以上介绍了placeholder属性的使用方法,以及placeholder样式修改的方法,比较简单,但需要注意浏览器的兼容性。以前没有接触过placeholder的小伙伴,可以自己动手尝试,希望可以帮助到你!

以上就是图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式的详细内容,更多请关注我!!!



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有